<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <link rel="stylesheet" href="http://115.159.88.63:9090/resources/bootstrap/dist/css/bootstrap.min.css"/>
  <!-- 引入本地Bootstrap的图标 -->
  <link rel="stylesheet" href="http://115.159.88.63:9090/resources/bootstrap-icons/font/bootstrap-icons.min.css"/>
<!--   
  <link rel="stylesheet" href="../../node_modules/bootstrap/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="../../node_modules/bootstrap-icons/font/bootstrap-icons.min.css"> -->
  <link rel="stylesheet" href="./blog-archives.css">
</head>

<body>

  <div id="app">
    <!-- 引入头部组件 -->
    <header class="navbar bg-dark navbar-dark fixed-top navbar-expand-lg ">
      <!-- 版心部分
          container：指定两端留白版心
      -->
      <nav class="container">
        <!-- logo+个人名称
              navbar-brand：导航栏中的一栏需要加的属性
          -->
        <a class="navbar-brand" href="http://localhost/pages/index/index.html">
          <!-- height="40px"：指定图片高度为40px -->
          <img height="40px" src="../../assets/images/itsource-w.png" alt="源码博客">
        </a>

        <!-- 折叠按钮
              navbar-toggler：代表是导航栏中的折叠按钮
              type="button"：默认button是submit，指定为按钮
              data-bs-toggle="collapse"：用于触发折叠菜单的展开与折叠
              data-bs-target="#navmenu"：指定折叠的目标，通过id选择器指定
          -->
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navmenu">
          <!-- navbar-toggler-icon：指定折叠的图标 -->
          <span class="navbar-toggler-icon"></span>
        </button>

        <!-- 导航部分
              collapse：指定一个折叠标签
              navbar-collapse：代表导航栏中的折叠元素
              justify-content-between：指定折叠元素的对齐方式
              ms-5：指定外边距，距离左边5rem
              id="navmenu"：用于折叠按钮寻找到此折叠元素
          -->
        <div class="collapse navbar-collapse justify-content-between ms-5" id="navmenu">
          <!-- navbar-nav：指定导航栏中的导航 -->
          <ul class="navbar-nav">
            <!-- nav-item：指定导航元素 -->
            <li class="nav-item">
              <!-- nav-link：指定导航链接 -->
              <a class="nav-link" href="http://localhost/pages/index/index.html"><i class="bi bi-house-door">首页</i></a>
            </li>
            <!-- nav-item：指定导航元素 -->
            <li class="nav-item">
              <!-- nav-link：指定导航链接 -->
              <a class="nav-link" href="http://localhost/pages/blogarchives/blog-archives.html"><i class="bi bi-clock-fill">归档</i></a>
            </li>
            <!-- 此处使用的是下拉菜单
                      nav-item：指定导航元素
                      dropdown：指定下拉菜单
                  -->
            <li class="nav-item dropdown">
              <!-- nav-link：指定导航链接
                          dropdown-toggle，data-bs-toggle="dropdown"：指定此元素是下拉菜单标签
                          
                      -->
              <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">
                <i class="bi bi-blockquote-right">文章分类</i>
              </a>
              <!-- dropdown-menu dropdown-menu-dark：指定下拉菜单内容并设置按钮颜色 -->
              <ul class="dropdown-menu dropdown-menu-dark">
                <li v-for="item in articleTypeCount"><a class="dropdown-item"
                     :href="'http://localhost/pages/blogsort/blog-sort.html?articleTypeId='+item.articleTypeId+'&articleTypeName='+item.articleTypeName">{{item.articleTypeName}}</a>
                </li>
              </ul>
            </li>
            <!-- nav-item：指定导航元素 -->
            <li class="nav-item">
              <!-- nav-link：指定导航链接 -->
              <a class="nav-link" href="../blogabout/blog-about.html"><i class="bi bi-person-lines-fill">关于我</i></a>
            </li>
          </ul>

          <!-- 搜索按钮部分：使用的是按钮组
                  navbar-nav：指定导航栏中的导航
              -->
          <div class="navbar-nav">

          </div>
        </div>


      </nav>
    </header>


    <section style="margin-top: 80px">
      <div class="container">
        <div class="row">

          <div class="col-md-8">
            <div class="timebox card mt-3 bg-light">
              <div class="timeline mt-3" v-for="(article, i) in articleList">
                <h3>{{article.year}}</h3>
                <ul v-for="(articleObj, i) in article.articleList">
                  <li>
                    <h4>
                      {{articleObj.day}}日<span>{{articleObj.month}}</span>
                    </h4>
                    <a :href="'http://localhost/pages/blogdetail/blog-detail.html?articleId='+articleObj.id" target="_blank" style="text-decoration: none;">
                      {{articleObj.articleName}}
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>


          <!-- 侧边栏
                sidebar：用于使用jQuery引入侧边栏组件
                col-md-4：此侧边栏站整个网格的4份
                mb-5：侧边栏距离下面5rem
                d-none d-sm-block：在xs尺寸下隐藏，适用于手机
            -->
          <div class="sidebar col-md-4 mb-5 d-none d-sm-block">
            <div>

              <!-- 卡片一 -->
              <div class="card mt-3">
                <div class="card-body d-flex">
                  <img :src="param.user_weixin_url" class="card-img-top img-fluid" style="width: 120px;" alt="...">
                  <div class="ms-5">
                    <p class="card-text">&bull; 技术干货分享</p>
                    <p class="card-text">&bull; 免费资料领取</p>
                    <p class="card-text fw-bolder">&bull; 扫码领取更多惊喜</>
                  </div>
                </div>
              </div>

              <!-- 卡片二 -->
              <div class="card mt-3">
                <div class="card-body">
                  <h5>社交</h5>
                  <hr />
                  <p class="card-text">微信: {{param.user_qq_no}}</p>
                  <p class="card-text">邮箱: {{param.user_email}}</p>
                </div>
              </div>

              <!-- 动态图 -->
              <img class="mt-3 img-fluid" src="../../assets/images/g1.gif" alt="" style="height: 130px; width: 100%;">

              <!-- 卡片三 -->
              <div class="card mt-3">
                <div class="card-body">
                  <h5>分类</h5>
                  <hr />
                  <p v-for="item in articleTypeCount"><a
                       :href="'../blogsort/blog-sort.html?articleTypeId='+item.articleTypeId+'&articleTypeName='+item.articleTypeName"
                       class="card-link text-decoration-none">{{item.articleTypeName}} ({{item.count}})</a></p>
                </div>
              </div>

              <!-- 卡片四 -->
              <div class="card mt-3">
                <div class="card-body">
                  <h5>归档</h5>
                  <hr />
                  <p v-for="item in archives"><a href="../blogarchives/blog-archives.html"
                       class="card-link text-decoration-none">{{item.month}} ({{item.count}})</a></p>
                </div>
              </div>

              <!-- 卡片五 -->
              <div class="card mt-3">
                <div class="card-body">
                  <h5>友情链接</h5>
                  <hr />
                  <p v-for="item in friendAddress"><a :href="item.address"
                       class="card-link text-decoration-none">{{item.name}}</a></p>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>
    </section>
  </div>

<!-- 引入本地Bootstrap5的JS -->
<script src="http://115.159.88.63:9090/resources/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- 引入本地vue.js -->
<script src="http://115.159.88.63:9090/resources/vue/dist/vue.min.js"></script>
<!-- 引入本地elementUi的JS -->
<script src="http://115.159.88.63:9090/resources/element-ui/lib/index.js"></script>
<!-- 引入本地的axios -->
<script src="http://115.159.88.63:9090/resources/axios/dist/axios.js"></script>



<!-- 
  <script src="../../node_modules/vue/dist/vue.min.js"></script>
  <script src="../../node_modules/element-ui/lib/index.js"></script>
  <script src="../../node_modules/jQuery/tmp/jquery.js"></script>
  <script src="../../node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
  <script src="../../node_modules/axios/dist/axios.min.js"></script> -->
  <script src="../../assets/js/common.js"></script>


  <script>
    /* 必须要挂载分页栏才会起作用 */
    new Vue({
      el: "#app",
      data() {
        return {
          time: 'null',
          articleList: [],
          articleTypeCount: [],
          archives: [],
          friendAddress:[],
          param: {}
        };
      },
      methods: {
        getArticleList() {
          //获取地址栏URL路径
          let url = location.href

          if (url.indexOf("?") != -1) {
            //如果有问题，说明是从右侧归档栏位点击某个时间点进入本页面的
            //浏览器地址栏上的中文会进行编码 - 所以获取出来的时候要解码
            let param = url.substr(url.indexOf("?") + 1);
            //对中文进行编码,否则会出现乱码问题
            param = decodeURIComponent(param);
            //获取到日期字符串，如：2021年12月
            this.time = param;
          }
          //向后台发请求，获取文章按日期分组数据
          this.$http.get('/tourist/article/getArticleList/' + this.time).then(result => {
            this.articleList = result.data;
          }).catch(error => {
            this.$message.error("系统繁忙，请稍后重试");
          });
        },
        getArticleTypeCount() {
          this.$http.get("/tourist/article/articleTypeCountVo")
            .then(res => {
              // 对象的解构表达式
              let { msg, data, success } = res.data;
              if (success) {
                this.articleTypeCount = data;
              } else {
                this.$message.error(msg);
              }
            })
        },
        getArchives() {
          this.$http.get("/tourist/article/archivesTime")
            .then(res => {
              // 对象的解构表达式
              let { msg, data, success } = res.data;
              if (success) {
                this.archives = data;
              } else {
                this.$message.error(msg);
              }
            })
        },
        getParam() {
          this.$http.get("/tourist/article/param")
            .then(res => {
              // 对象的解构表达式
              let { msg, data, success } = res.data;
              if (success) {
                this.param = data;
              } else {
                this.$message.error(msg);
              }
            })
        },
        getFriendAddress(){
                    this.$http.get("/tourist/article/friendAddress")
                        .then(res=>{
                            // 对象的解构表达式
                            let {msg,data,success} = res.data;
                            if(success){
                                this.friendAddress = data;
                            }else {
                                this.$message.error(msg);
                            }
                        })
                },
      },
      mounted() {
        this.getArticleList()
        this.getArticleTypeCount()
        this.getArchives()
        this.getParam()
        this.getFriendAddress()
      },
    })
  </script>

  <script>
    // // 通过jQuery的加载事件引入头部组件到指定div，第一个参数是要引入的组件，第二个参数是引入之后要执行的函数
    // $(".header").load("../header/header.html", () => { })
    // $(".sidebar").load("../sidebar/sidebar.html", () => { })
  </script>

</body>

</html>